<template>
  <div class="attendance-record-detail">
    <el-card class="detail-card">
      <template #header>
        <div class="card-header">
          <span>考勤记录详情1</span>
          <el-button type="primary" @click="goBack">返回</el-button>
        </div>
      </template>
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="工号">{{ recordDetail.employee_id }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ recordDetail.employee_name }}</el-descriptions-item>
        <el-descriptions-item label="日期">{{ recordDetail.date }}</el-descriptions-item>
        <el-descriptions-item label="星期">{{ recordDetail.weekday }}</el-descriptions-item>
        <el-descriptions-item label="考勤类型">
          <el-tag :type="getAttendanceTypeTagType(recordDetail.attendance_type)">
            {{ recordDetail.attendance_type }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="加班类型">
          <el-tag :type="getOvertimeTypeTagType(recordDetail.overtime_type)">
            {{ getOvertimeTypeText(recordDetail.overtime_type) }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <el-divider>工时详情</el-divider>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="早上上班">{{ recordDetail.morning_on_duty }}</el-descriptions-item>
        <el-descriptions-item label="中午下班">{{ recordDetail.noon_off_duty }}</el-descriptions-item>
        <el-descriptions-item label="下午下班">{{ recordDetail.afternoon_off_duty }}</el-descriptions-item>
        <el-descriptions-item label="晚上下班">{{ recordDetail.night_off_duty }}</el-descriptions-item>
        <el-descriptions-item label="中午工时">{{ recordDetail.noon_work_hours }}</el-descriptions-item>
        <el-descriptions-item label="下午工时">{{ recordDetail.afternoon_work_hours }}</el-descriptions-item>
        <el-descriptions-item label="白班总工时">{{ recordDetail.day_total_work_hours }}</el-descriptions-item>
        <el-descriptions-item label="晚上工时">{{ recordDetail.night_work_hours }}</el-descriptions-item>
        <el-descriptions-item label="加班工时">{{ recordDetail.overtime_hours }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const route = useRoute()
const router = useRouter()
const recordDetail = ref({
  employee_id: '',
  employee_name: '',
  date: '',
  weekday: '',
  attendance_type: '',
  overtime_type: 0,
  morning_on_duty: '',
  noon_off_duty: '',
  afternoon_off_duty: '',
  night_off_duty: '',
  noon_work_hours: 0,
  afternoon_work_hours: 0,
  day_total_work_hours: 0,
  night_work_hours: 0,
  overtime_hours: 0
})

// 获取考勤记录详情
const fetchRecordDetail = async () => {
  try {
    const response = await axios.get(`http://localhost:8000/api/attendance-records/${route.params.id}`)
    if (response.data) {
      recordDetail.value = response.data
    }
  } catch (error) {
    ElMessage.error('获取考勤记录详情失败')
    console.error('获取考勤记录详情失败:', error)
  }
}

// 获取考勤类型标签样式
const getAttendanceTypeTagType = (type: string) => {
  const typeMap: { [key: string]: string } = {
    '正常': 'success',
    '迟到': 'warning',
    '早退': 'warning',
    '旷工': 'danger',
    '请假': 'info'
  }
  return typeMap[type] || ''
}

// 获取加班类型标签样式
const getOvertimeTypeTagType = (type: number) => {
  const typeMap: { [key: number]: string } = {
    0: 'info',
    1.5: 'success',
    2: 'warning',
    3: 'danger'
  }
  return typeMap[type] || ''
}

// 获取加班类型文本
const getOvertimeTypeText = (type: number) => {
  const typeMap: { [key: number]: string } = {
    0: '无加班',
    1.5: '1.5倍',
    2: '2倍',
    3: '3倍'
  }
  return typeMap[type] || '未知'
}

// 返回上一页
const goBack = () => {
  router.back()
}

onMounted(() => {
  fetchRecordDetail()
})
</script>

<style scoped>
.attendance-record-detail {
  padding: 20px;
}

.detail-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-descriptions {
  margin-bottom: 20px;
}
</style>